<template>
  <div class="dataSource">
    <el-scrollbar style="height: 65vh">
      <el-divider content-position="left"> <i></i>数据来源 </el-divider>
      <el-form
        ref="form"
        :model="dataSource"
        :rules="formRules"
        label-width="120px"
      >
        <el-form-item label="数据表名称" prop="tableName">
          <el-input
            :disabled="true"
            v-model="dataSource.tableName"
            style="width: 220px"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item></el-form-item>
      </el-form>
      <el-divider content-position="left"> <i></i>录入数据表 </el-divider>
      <div class="tableBox">
        <znxdListModify
          v-model="dataSource.formData"
          :formColumn="selectionFormColumn"
          :initData="tablesData"
          mode="addAndDelete"
        ></znxdListModify>
      </div>
    </el-scrollbar>
    <div class="buttons" style="text-align: center; padding: 20px 0 0">
      <el-button type="primary" style="margin-left: 15px">取消</el-button>
      <el-button type="primary" style="margin-left: 15px" @click="handleConfirm"
        >确定</el-button
      >
    </div>
  </div>
</template>
<script>
import znxdListModify from "./listModifyConfig.vue"
import { manualEntryConfigDeatil, manualEntryConfig } from "@/api/manualEntry/manualEntry.js"
export default {
  components: {
    znxdListModify
  },
  data () {
    return {
      tablesData: [
      ],
      gridData: [
      ],
      defaultProps: {
        children: "children",
        label: "label"
      },
      dataSource: {},
      // 数据库类型字典
      typeOptions: [
        {
          label: "excel",
          value: 1
        },
        {
          label: "csv",
          value: 2
        }
      ],
      page: {
        pageNo: 1, // 当前位于哪页
        pageSize: 8, // 1页显示多少条
        total: 0
      },
      selectionFormColumn: [
      ],
      dataChooseType: ["select", "input", "cascader", "date"],
      initSelection: [],
      // 多表选择
      tableSourceData: [],
      // initTableSourceData: []
      formRules: {
        fileType: [{ required: true, message: "不能为空" }],
        tableName: [{ required: true, message: "不能为空" }],
        file: [{ required: true, message: "不能为空" }]
      }
    }
  },
  props: {
    initData: Object,
    mode: String
  },
  computed: {
  },
  watch: {
    dataSource: {
      deep: true,
      handler: function (val) {
        this.$emit("input", val)
      }
    },
    initData: {
      deep: true,
      handler: async function (obj) {
        // let fileType = obj.fileType === 0 ? 1 : null
        // this.dataSource = {
        //   fileType: fileType,
        //   tableName: obj.tableName
        // }
        // this.tablesData = obj.readerColumns
        // this.dataSource.selection = obj.readerColumns
        // let _this = this
        // setTimeout(function () {
        //   _this.$refs.form.clearValidate()// 消除校验,这里的setTimeOut不能去掉,去掉之后会不生效
        // }, 30)
      }
    }
  },
  methods: {
    // 提交配置表单
    handleConfirm () {
      let { formData } = this.dataSource
      formData.forEach(item => {
        item.regionCode = item.regionCode.join("/")
      })
      let obj = {
        id: this.$route.query.id,
        formData
      }
      manualEntryConfig(obj).then((res) => {
        let data = res.data
        if (data.code == "200") {
          this.$message({
            message: data.msg,
            type: "success"
          })
          this.$router.push('/manual/entryList')
        } else {
          this.$message({
            message: data.msg,
            type: "error"
          })
        }
      })
    },
    // 获取表单配置信息
    handleGetConfigInfo () {
      let id = this.$route.query.id
      manualEntryConfigDeatil({ id }).then((res) => {
        console.log(res)
        let data = res.data
        if (data.code == "200") {
          this.selectionFormColumn = []
          data.data.title.forEach(item => {
            console.log(this.dataChooseType[Number(item.dataSelectType) - 1])
            this.selectionFormColumn.push({
              type: this.dataChooseType[Number(item.dataSelectType) - 1],
              name: item.columnName == "行政区划" ? "regionCode" : item.columnName == "表单时间" ? "formDate" : item.columnName,
              label: item.columnName,
              options: item.columnMemoLists && item.columnMemoLists.map(item => {
                return { value: item, label: item }
              }),
              handleChange: (item) => {
                console.log(item)
                // item.other = "666"
              }
            })
            this.dataSource.tableName = data.data.tableName
            this.tablesData = data.data.dataList.map(item => {
              return { ...item, regionCode: item.regionCode.split("/") }
            })
          })

        } else {
          this.$message({
            message: data.msg,
            type: "error"
          })
        }
      })
    }
  },
  created () {
    this.handleGetConfigInfo()
  }
};
</script>
<style lang="scss" scoped>
.dataSource {
  background: #fff;
  height: 100%;
  padding: 20px 20px 40px;
  border-radius: 3px;
  .el-divider__text.is-left {
    left: 0;
    display: flex;
    flex-direction: row;
    > i {
      display: block;
      width: 3px;
      height: 14px;
      background: #128df3;
      margin-right: 5px;
    }
  }
  .tableBox {
    padding-left: 40px;
  }
  .transfer {
    width: 600px;
    // max-height: 420px;
    // border: 1px solid red;
  }
}
</style>
<style lang="scss">
.dataSource {
  .transfer {
    .el-transfer-panel__body {
      height: 346px;
    }
    .el-transfer-panel__list {
      height: 300px;
    }
  }
}
</style>
